<template>
	<!-- 开屏引导页 -->
	<view class="guideContent" :style="{height:pageHeight,width:pageWidth}">
		<swiper :style="{height:pageHeight,width:pageWidth}" class="swiper" :circular="circular" :autoplay="autoplay"
		 :interval="interval" :indicator-dots="indicatorDots" :duration="duration">
			<block v-for="(item,index) in guide.guideSwiper" :key="index">
				<swiper-item>
					<image mode="widthFix" :src="item.imgSrc" :data-url="item.url" :data-opt="item.opt" @tap.stop="jump"></image>
				</swiper-item>
			</block>
		</swiper>
		<text class="jumpBtn" :style="{top:safeTop}" @tap="jump" data-url="index">{{guide.jumpText}}</text>
		<hk-modal ref="ysModal" :isCntSlot="true">
			<template v-slot:cntSlot>
				<view class="ysText">
					<text>尊敬的用户：</text>
					<view>
						欢迎使用“找培训app”，在您使用前请仔细阅读
						<text class="zcHref" @tap="toPage" :data-url="initInfo.policy">《用户协议》</text>与
						<text class="zcHref" @tap="toPage" :data-url="initInfo.privacy">《隐私政策》</text>
						，找培训将严格遵守您同意的各项条款使用您的信息，以便为您提供更好的服务。
					</view>
					<view>
						点击“同意”以为和您自愿遵守
						<text class="zcHref" @tap="toPage" :data-url="initInfo.policy">《用户协议》</text>与
						<text class="zcHref" @tap="toPage" :data-url="initInfo.privacy">《隐私政策》</text>
						，找培训将严格保护您的个人信息，确保信息安全。
					</view>
				</view>
			</template>
		</hk-modal>
	</view>
</template>

<script>
	import {mapState,mapGetters,mapMutation,mapActions} from "vuex";
	import hkModal from "../../components/hk-modal/hk-modal.vue";
	export default {
		computed: {
			...mapState({
				initInfo: state => state.sys.initInfo,
			})
		
		},
		components:{
			hkModal
		},
		data() {
			return {
				indicatorDots: true,
				autoplay: false,
				interval: 3000,
				duration: 500,
				circular: false,
				pageHeight: uni.getSystemInfoSync().screenHeight+'px',
				pageWidth: uni.getSystemInfoSync().screenWidth+'px',
				safeTop:(uni.getSystemInfoSync().statusBarHeight+20)+'px',
				guide: {
					jumpText: "跳过",
					showText: "立即体验",
					guideSwiper: [{
						imgSrc: "../../static/guide1.png",
						url: '',
						opt: {}
					}, {
						imgSrc: "../../static/guide2.png",
						url: '',
						opt: {}
					}, {
						imgSrc: "../../static/guide3.png",
						url: 'index',
						opt: {}
					}]
				}
			}
		},
		methods: {
			jump(e){
				let _url=e.currentTarget.dataset.url;
				if(_url){
					uni.setStorageSync("first",true)
					
					uni.reLaunch({
						url:"/pages/interest/interest"
					})
					
				}
			},
			showYs() {
				if (!uni.getStorageSync("showYs") ) {
					this.$refs.ysModal.init({
						title: '找培训隐私政策',
						cancle: '不同意',
						confirm: '同  意',
						cntText: '',
						maskClose:false,
						cancleFcn: () => {
							if(uni.getSystemInfoSync().platform=='ios'){
								plus.ios.import("UIApplication").sharedApplication().performSelector("exit")
							}else{
								plus.runtime.quit()
							}
						},
						confirmFcn: () => {
							uni.setStorageSync("showYs", true)
						}
					})
					this.$refs.ysModal.show()
				}
				
			
			}
		},
		onLoad() {
			setTimeout(()=>{
				this.showYs();
			},1500)
		}
	}
</script>

<style lang="scss">
	.ysText {
		font-size: 28upx;
		color: #333333;
		padding: 18upx;
	}
	
	.zcHref {
		color: #ffcd11;
	}
	.guideContent {
		position: relative;

		.jumpBtn {
			box-sizing: border-box;
			position: absolute;
			right: 50upx;
			width: 100upx;
			height: 100upx;
			font-size: 28rpx;
			line-height: 100upx;
			text-align: center;
			background-color: rgba(0,0,0,0.3);
			border-radius: 13px;
			color: #FFFFFF;
			border-radius: 50%;
		}
		
	}

	swiper-item {
		flex-grow: 0;
		flex-shrink: 0;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 100%;
			display: block;
		}
	}
</style>
